<template>
    <div class="page-main letter" :style="{height: marginTop}">
        <div class="letter-main">
            <div class="title">引言</div>
            <div class="letter-content">
              <p>
                家书是家庭的情感纽带，是家教的重要载体，是家风的一面镜子。为庆祝中国共产党成立100周年，上海传承家谱家训服务平台增设红色家书板块，可作为党史学习教育的载体之一，旨在传承红色基因，展现老一辈革命家的家国情怀、奉献精神、理想信念，既反映他们对国家富强和人民幸福的追求，又反映他们对家庭和亲属的深情。红色家书板块承载着信仰和亲情，蕴含着智慧和力量，是党史教育中坚定初心和使命的重要史料，是学习和传承老一辈革命家的高尚品格和道德风范的生动教材。
              </p>
              <span>
                王、毛、邓、左、叶、刘、关、朱、任、向、许、李
              </span>
              <span>
                杨、吴、何、张、恽、林、欧阳、罗、周、陈、赵
              </span>
              <span>
                俞、贺、高、袁、聂、夏、徐、殷、谢、彭、董、瞿
              </span>
              <p>
                您可以输入以上35个姓氏之一，查询并下载相应的50位革命家家书中精选出的100条家训，其中包含15对革命伉俪之间互勉家训。
              </p>
            </div>
            <div class="form-box">
                <div class="ipt">
                    <span>姓氏：</span>
                    <input type="text" placeholder="" v-model="familyName" @keyup.enter="search">
                </div>
            </div>
            <a href="javascript:" class="search" @click="search">查询</a>
        </div>
        <div class="letter-btm">
            <div class="letter-btm-logo"></div>
            <div class="letter-btm-tit">上海传承家谱家训服务平台</div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                familyName:'',
                marginTop: '100vh',
            }
        },
        computed:{
            isNotEmpty(){ // 判断姓氏是否为空
                return this.notEmpty(this.familyName, '姓氏不能为空！')
            }
        },
        mounted(){
        },
        methods:{
            search(){
                if( this.isNotEmpty ) return;
                let tipsLetterParams = {
                    familyName: this.familyName.trim(),
                };
                this.$router.push({ path:"/redLetterResult", query: {
                    tipsLetterParams: JSON.stringify(tipsLetterParams),
                } })
            },
        }
    }
</script>
